<template>
  <div>

    <div class="box1" @click="show">
      这是 div
      <p class="box2" @click="show">
        这是 p 标签
        <span class="box3" @click="show">这是 span</span>
      </p>
    </div>

    <hr>
    <p>--------------------------------</p>
    <!-- ref 出现的目的：辅助程序员获取和操作 DOM 元素 -->
    <h1 ref="myh1">App 根组件</h1>
    <input type="text" ref="ipt"><br>

    <button @click="onBtn1Click">点击按钮，让 h1 变红</button>&nbsp;

    <button @click="onBtn2Click">让Counter组件的数值+1</button>

    <button @click="onBtn3Click">让counter中的input获取焦点</button>
    <hr>

    <my-counter ref="counter"></my-counter>
  </div>
</template>

<script>
import MyCounter from './Counter.vue'

export default {
  name: 'App',
  methods: {
    onBtn1Click() {
      // 1. 默认情况下，每个 vue 组件实例的 this 上存在一个 this.$refs 的属性，指向一个空对象
      // console.log(this)
      this.$refs.myh1.style.color = 'red'
      this.$refs.ipt.focus()
    },
    onBtn2Click() {
      // console.log()
      this.$refs.counter.add()
    },
    onBtn3Click() {
      console.log(this.$refs.counter.$refs.txt.focus())
      // ElementUI
      // Vue 项目中可用的组件库有很多
      // Vant、ElementUI、Mint-UI
      // ElementPlus -> vue3.0
    },
    show(e) {
      // e.target 永远指向用户点击的那个元素
      // console.log(e.target)

      // e.currentTarget 指向当前正在触发事件的那个元素
      // 或者说，当前事件冒泡到哪一层，e.currentTarget 就指向这一层的元素
      console.log(e.currentTarget)
    }
  },
  components: {
    MyCounter
  }
}
</script>

<style lang="less" scoped>
.box1 {
  background-color: orange;
  padding: 20px;
}
.box2 {
  background-color: pink;
}
.box3 {
  background-color: cyan;
}
</style>
